import { useState } from "react";
import { View, Image } from "@tarojs/components";
import { Picker } from "@nutui/nutui-react-taro";
import donwIcon from "@/img/comm/down.png";
import "./index.scss";

interface IHeaderBoxProps {
  title: string;
  current?: number;
  selectData?: API.OptionItem;
  options?: API.OptionItem[];
  handleClick?: (val: number) => void;
  handleChange?: (val: API.OptionItem) => void;
  type?: number;
}

const IHeaderBoxIndex: React.FC<IHeaderBoxProps> = (props) => {
  const {
    title,
    options: listData = [],
    current = 0,
    type = 0,
    selectData = {},
    handleClick,
    handleChange,
  } = props;

  const [isVisible, setIsVisible] = useState<boolean>(false);

  const confirmPicker = (options: any[], values: API.Key[]) => {
    handleChange?.(options[0]);
  };

  return (
    <View className="header_box flex_row">
      <View className="header_title">{title}</View>
      {listData.length > 0 ? (
        type == 0 ? (
          <View className="switch_box flex_row">
            {listData.map((item) => (
              <View
                key={item.value}
                className={
                  item.value == current
                    ? "switch_item active_item"
                    : "switch_item"
                }
                onClick={() => handleClick?.(item.value as number)}
              >
                {item.label}
              </View>
            ))}
          </View>
        ) : (
          <View
            className="picker_box flex_row"
            onClick={() => setIsVisible(true)}
          >
            <View>{selectData.text}</View>
            <Image src={donwIcon} className="picker_icon" />
          </View>
        )
      ) : null}
      {type == 1 ? (
        <Picker
          visible={isVisible}
          defaultValue={[selectData.value as number]}
          options={listData as any[]}
          onConfirm={confirmPicker}
          onClose={() => setIsVisible(false)}
        />
      ) : null}
    </View>
  );
};

export default IHeaderBoxIndex;
